import axios from 'axios';
import React, { Component } from 'react'
import './index.css';
import qs from 'querystring';

export default class HeroDetail extends Component {

    state = {
        info: {}
    }

    render() {
        let {info} = this.state;
        return (
            <div className="hero-detail-container" style={{backgroundImage: `url("http://127.0.0.1:8090${info.big_image}")`}}>
                <button onClick={this.back} style={{position:'absolute', left: '100px', top: '30px'}} className="btn btn-default">返回</button>
                <div className="info">
                    <h3>{info.name}</h3>
                    <p>{info.type}</p>

                    <div className="skill-list">
                        {info.skills && info.skills.map((item, index) => {
                            return <div key={index} className="item">
                                <img width="100%" src={"http://127.0.0.1:8090" + item.img} alt="" />
                                <h6>{item.name}</h6>
                            </div>
                        })}
                        
                    </div>
                </div>

                <div className="hero-story" dangerouslySetInnerHTML={{__html: info.intro}}>
                </div>
            </div>
        )
    }

    back = () => {
        // this.props.history.go(-1);// goBack
        this.props.history.goBack();
    }

    //组件挂载完毕的回调
    async componentDidMount(){
        //1. params传参的处理方式
        // // console.log(this.props.match.params.id);
        let {id} = this.props.match.params
        
        //2. query传参的处理方式
        // console.log(this.props);
        // let searchStr = this.props.location.search.slice(1);
        // let id = qs.parse(searchStr).id;

        //3. state 传参的处理方式
        // console.log(this.props);
        // let id = this.props.location.state.id;

        //显示当前英雄的详细信息
        let result = await axios('http://127.0.0.1:8090/heros/' + id);

        this.setState({
            info: result.data
        })

    }
}
